<script setup lang="ts">
import type { LikeConfig, BtnType } from '@/types/consult'
import type { ButtonType } from 'vant'
import { useLike } from '@/composable'

const props = withDefaults(
  defineProps<{
    round?: boolean
    type?: ButtonType
    plain?: boolean
    size?: number
    item: BtnType
    paramsConfig?: LikeConfig
  }>(),
  {
    round: false,
    type: 'success',
    size: 12,
    flag: 0
  }
)

const { loading, changeLike } = useLike(props.paramsConfig as LikeConfig)
</script>

<template>
  <div
    class="DP-like-page"
    :style="{ fontSize: `${size}px` }"
    @click="changeLike(item)"
  >
    <van-button :loading="loading" :round="round" :type="type" :plain="plain">{{
      item.likeFlag === 1 ? '已关注' : '+ 关注'
    }}</van-button>
  </div>
</template>

<style lang="scss" scoped>
.DP-like-page {
  .van-button {
    width: 70px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    font-size: 1em;
  }
}
</style>
